<template>
   <div class="profile">
      <div class="login" v-if="!isLogin">
         <el-button type="success" @click="toLogin">登录</el-button>
      </div>
      <div class="user" v-else>
         <header class="profile-header">
            <h3>当前用户: {{ username }}</h3>
         </header>
         <main class="profile-body">
            <div class="address">
               <el-button @click.stop="toEditAddressPage">我的地址<i class="el-icon-arrow-right"></i></el-button>
            </div>
         </main>
         <footer class="profile-footer">
            <div>
               <el-button type="danger" @click="logout">退出登录</el-button>
            </div>
         </footer>
      </div>
      <transition enter-active-class="slideInRight">
         <router-view>
            <router-view></router-view>
         </router-view>
      </transition>
   </div>
</template>

<script>
   export default {
      name: "Profile",
      data () {
         return {

         }
      },
      computed: {
         username () {
            return this.$store.state.username;
         },
         isLogin () {
            return this.$store.state.isLogin;
         }
      },
      methods: {
         toLogin () {
            this.$router.push({
               path: '/Login'
            });
         },
         routerRefresh(){
            this.routerAlive = false;
            this.$nextTick(()=>{
               this.routerAlive = true;
            });
         },
         toEditAddressPage () {
            console.log('address...');
            this.$router.push({
               path: '/Profile/EditAddressPage'
            });
            this.routerRefresh();

         },
         logout () {
            this.$store.commit('logout');
            this.$router.push({
               path: '/Profile'
            });
         }
      }
   }
</script>

<style lang="scss" scoped>
   @import "../assets/css/variable.scss";

   .profile {
      height: 100%;
      background-color: #fff;
      position: relative;
      overflow: hidden;
   }

   .login {
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
   }


   .user {
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      .profile-header {
         line-height: 50px;
      }
      .el-button {
         width: 80%;
         margin-top: 10px;
      }
   }



</style>
